<script>
  import $ from 'dfish-widget'
  import Widget from '../Widget.vue'
  import form from '../widget.form.js'
  import input from '../widget.form.input.js'

  export default {
    mixins: [Widget],
    data() {
      return {
        name: 'Rate',
        remark: '评分',
        extends: [form, input],
        deprecate: 'placeholder,validate-default',
        attrs: [{
            name: 'count',
            type: 'Number',
            remark: 'star 总数',
            option: ``,
            default: '5'
          }, {
            name: 'allow-half',
            type: 'Boolean',
            remark: '是否允许半选',
            option: ``,
            default: ''
          },
          {
            name: 'cancelable',
            type: 'Boolean',
            remark: '是否允许再次点击后取消选中',
            default: 'true'
          },
          {
            name: 'sum',
            type: 'Number',
            remark: '总分',
            default: '5'
          },
          {
            name: 'text',
            type: 'Array',
            remark: '每个评分的说明文字',
            default: ''
          },
        ],
        examples: [
          {
            remark: '普通用法',
            view: true,
            type: 'html',
            code: `
              <template>
                <w-rate :label="{text: '评分'}"></w-rate>
              </template>
            `,
          },
          {
            remark: '半星选择',
            view: true,
            type: 'html',
            code: `
              <template>
                <w-rate :label="{text: '评分'}" :allow-half="true"></w-rate>
              </template>
            `,
          },
          {
            remark: '显示文本',
            view: true,
            type: 'html',
            code: `
              <template>
                <w-rate :label="{text: '评分'}" :text="['terrible', 'bad', 'normal', 'good', 'wonderful']"></w-rate>
              </template>
            `,
          },
          {
            remark: '显示10颗星，总分10分',
            view: true,
            type: 'html',
            code: `
              <template>
                <w-rate :label="{text: '评分'}" count="10" sum="10"></w-rate>
              </template>
            `,
          }
        ]
      }
    }
  }
</script>

<style>
</style>
